﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css"/>

    <title>用户列表 - TellBookManage v1.0</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span
        class="c-gray en">&gt;</span> 用户管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                              href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="text-c">
        <input type="text" class="input-text" style="width:250px" placeholder="输入用户ID" id="s-id" name="s-id">
        <input type="text" class="input-text" style="width:250px" placeholder="输入用户名称" id="s-name" name="s-name">
        <input type="text" class="input-text" style="width:250px" placeholder="输入用户邮箱" id="s-email" name="s-email">
        <input type="text" class="input-text" style="width:250px" placeholder="输入用户年龄" id="s-age" name="s-age">
        <button type="submit" class="btn btn-success radius" id="search" name="search"><i
                class="Hui-iconfont">&#xe665;</i> 搜用户
        </button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20"><span class="l">
<!--        <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> -->
        <a href="javascript:;" onclick="member_add('添加用户','/toUserAdd','','510')" class="btn btn-primary radius"><i
            class="Hui-iconfont">&#xe600;</i> 添加用户</a></span></div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
<!--                <th width="25"><input type="checkbox" name="" value=""></th>-->
                <th width="80">ID</th>
                <th width="100">用户名</th>
                <th width="90">密码</th>
                <th width="150">邮箱</th>
                <th width="130">年龄</th>
                <th width="70">状态</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody id="tbody_id">
            <tr class="text-c" th:each="user : ${userList}">
                <!--				<script th:inline="javascript">-->
                <!--					var userId=[[${user.getId()}]];-->
                <!--					var userName=[[${user.getUserName()}]];-->
                <!--					console.log(userId);-->
                <!--				</script>-->
<!--                <td><input type="checkbox" th:value="${user.getId()}" value="1" name=""></td>-->
                <td th:text="${user.getId()}">1</td>
                <td th:text="${user.getUserName()}"><u style="cursor:pointer" class="text-primary"
                                                       onclick="member_show(userName,'member-show.html',userId,'360','400')">张三</u>
                </td>
                <td th:text="${user.getPassWord()}">123456</td>
                <td th:text="${user.getEmail()}">admin@mail.com</td>
                <td th:text="${user.getAge()}">18</td>
                <td class="td-status"><span class="label label-success radius">已启用</span></td>
                <td class="td-manage">
                    <a style="text-decoration:none" onClick="member_stop(this,userId)" href="javascript:;" title="停用"><i
                            class="Hui-iconfont">&#xe631;</i></a>
                    <a title="编辑" href="javascript:;" onclick="member_edit('编辑','/toUserUpdate?id=',this,'','320')"
                       class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
                    <a style="text-decoration:none" class="ml-5"
                       onClick="change_password('修改密码','/toUpdatePassWord?id=',this,'','320')" href="javascript:;"
                       title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>
                    <a title="删除" href="javascript:;" onclick="member_del(this)" class="ml-5"
                       style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    $(function () {
        //点击搜索时，异步请求后台数据
        $('#search').off().on('click', function () {
            var user = new Object();
            user.id = $("#s-id").val();
            user.userName = $("#s-name").val();
            user.email = $("#s-email").val();
            user.age = $("#s-age").val();
            $.ajax({
                type: "POST",
                url: "queryUserInfo",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(user),//JS对象转JSON
                dataType: "JSON",
				async: true,
                success: function (data) {
                    if ("200" == data.code) {
                        var userList = data.data;
                        var str = '';
                        for (var i = 0; i < userList.length; i++) {
                            //获取tbody标签，移下面的tr标签，i+1,就新增一个tr
                            str += '<tr class="text-c">';
                            // var tds = '<td><input type="checkbox" value=id name=""></td>';
                            var tds = '';
                            tds += '<td>' + userList[i].id + '</td>';
                            tds += '<td>' + userList[i].userName + '</td>';
                            tds += '<td>' + userList[i].passWord + '</td>';
                            tds += '<td>' + userList[i].email + '</td>';
                            tds += '<td>' + userList[i].age + '</td>';
                            tds += '<td class="td-status"><span class="label label-success radius">已启用</span></td>';
                            tds += '<td class="td-manage">'
									+'<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>'
									+'<a title="编辑" href="javascript:;" onclick="member_edit(\'编辑\',\'/toUserUpdate?id=\',this,\'\',\'320\')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>'
									+'<a style="text-decoration:none" class="ml-5" onClick="change_password(\'修改密码\',\'/toUpdatePassWord?id=\',this,\'\',\'320\')" href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>'
									+'<a title="删除" href="javascript:;" onclick="member_del(this)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>'
									+ '</td>';
                            str += tds;
                            str += '</tr>';
                        }
						$("#tbody_id").html(str);//新增新的tr
					}
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    layer.msg('error!', {icon: 2, time: 1000});
                }
            });
        });
    });

    /*用户-添加*/
    function member_add(title, url, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-查看*/
    function member_show(title, url, userId, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-停用*/
    function member_stop(obj, userId) {
        layer.confirm('确认要停用吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: '',
                dataType: 'json',
                success: function (data) {
                    $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
                    $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
                    $(obj).remove();
                    layer.msg('已停用!', {icon: 5, time: 1000});
                },
                error: function (data) {
                    console.log(data.msg);
                },
            });
        });
    }

    /*用户-启用*/
    function member_start(obj, userId) {
        layer.confirm('确认要启用吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: '',
                dataType: 'json',
                success: function (data) {
                    $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
                    $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
                    $(obj).remove();
                    layer.msg('已启用!', {icon: 6, time: 1000});
                },
                error: function (data) {
                    console.log(data.msg);
                },
            });
        });
    }

    /*用户-编辑*/
    function member_edit(title, url, obj, w, h) {
        var tr = obj.parentNode.parentNode;
        var userId = tr.cells[0].innerText;
        layer_show(title, url + userId, w, h);
    }

    /*密码-修改*/
    function change_password(title, url, obj, w, h) {
        var tr = obj.parentNode.parentNode;
        var userId = tr.cells[0].innerText;
        layer_show(title, url + userId, w, h);
    }

    /*用户-删除*/
    function member_del(obj) {
        var tr = obj.parentNode.parentNode;
        //alert(tr.cells[1].innerText);
        //alert(tr.cells[1].innerHTML);
        var userId = tr.cells[0].innerText;
        console.log(userId);
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: 'delUser',
                dataType: 'json',
                data: {
                    "userId": userId
                },
                success: function (data) {
                    if (data != null) {
                        if ("200" == data.code) {
                            //TODO
                            $(obj).parents("tr").remove();
                            layer.msg('已删除!', {icon: 1, time: 1000});
                        } else {
                            $.messager.alert("操作失败，请重试");
                        }
                        console.log("code = " + data.code + "，result=" + data.data);//IE不支持console输出
                    } else {
                        $.messager.alert("系统服务异常！");
                    }
                },
                error: function (data) {
                    console.log(data.result);
                },
            });
        });
    }
</script>
</body>
</html>